<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    body {
      width: 300px;
      padding: 15px;
      /* https://blatr.cn/blogs/details/138 */
      /*  font-family: system-ui 仅在 Chrome 56+ 得到了支持，在 macOS 的 Chrome 53-55 下，需要使用 font-family: BlinkMacSystemFont，在 macOS/iOS 的其他浏览器下，需要使用font-family: -apple-system。所以，想要使用 system-ui，兼容性最好的写法为： */
      font-family: system-ui, -apple-system, BlinkMacSystemFont;
    }
    .container {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .title {
      margin: 0 0 10px;
      color: #333;
      font-size: 18px;
	  text-align: center;
    }
    .button {
      width: 100%;
      padding: 10px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
      transition: 0.2s;
    }
    .primary {
      background: #4CAF50;
      color: white;
    }
    .primary:hover {
      background: #45a049;
    }
    .primary:disabled {
      background: #ccc;
      cursor: not-allowed;
    }
    .secondary {
      background: #f5f5f5;
      border: 1px solid #ddd;
    }
    .secondary:hover {
      background: #e8e8e8;
    }
    .file-input {
      display: none;
    }
    .status {
      padding: 8px;
      border-radius: 4px;
      font-size: 13px;
      background: #e3f2fd;
      color: #1976d2;
    }
    .error {
      background: #ffebee;
      color: #c62828;
    }
	.tips li {
	padding-bottom: 10px;
	}
  </style>
</head>
<body>
  <div class="container">
    <h2 class="title">教务系统成绩录入助手</h2>
	<ul class="tips">
		<li>
			请严格按照EXCEL模板要求进行成绩编辑再来导入
		</li>
		<li>
			如遇缺考等特殊情况请手动处理
		</li>
		<li>
			如有问题请联系杨克勤老师QQ：1475905499
		</li>
		<li>
			Gitee地址（内含模板文件）：<a href="https://gitee.com/yang_ke_qin/TeacherHelper_GradeImporter" target="_black">点我跳转</a>
		</li>
	</ul>
    <input type="file" id="excelFile" accept=".xlsx,.xls" class="file-input">
    <button id="selectFile" class="button secondary">选择Excel文件</button>
    <button id="startImport" class="button primary" disabled>开始导入成绩</button>
    <div id="status" class="status"></div>
  </div>
  <script src="popup.js"></script>
</body>
</html>